import React, {useEffect, useState} from 'react';
import {Col, FormProps, Pagination, Row} from 'antd';
import {Button, Table, Form, Input, Space, Tag} from 'antd';
import type {TableColumnsType} from 'antd';

import axios from "axios";

type FieldType = {
    id?: string;
    userId?: string;
    createTime?: string;
    history?: string;
};


const TrainList: React.FC = () => {

    const [formData, setFormData] = useState({
        id: '',
        userId: '',
        createTime: '',
        history: '',
        current: 0,
        pageSize: 10
    });

    const [data, setData] = useState<DataType[]>([]);
    const [loading, setLoading] = useState(false);
    const [pagination, setPagination] = useState({
        current: 1,
        pageSize: 10,
        total: 0
    });

    interface DataType {
        id: number;
        userId: string;
        createTime: string;
        history: string;
    }

    const columns = [
        {title: 'id', dataIndex: 'id'},
        {title: 'userId', dataIndex: 'userId'},
        {title: 'createTime', dataIndex: 'createTime'},
        {title: 'history', dataIndex: 'history'}
    ];

    const handleSubmit = async (values: FieldType) => {
        try {
            const response = await axios.post('http://localhost:8080/api/train/page', values);
            console.log('Response:', response.data);
            setData(response.data.content);
            setPagination({
                ...pagination,
                current: response.data.current,
                pageSize: response.data.pageSize,
                total: response.data.totalElements
            });
        } catch (error) {
            console.error('Error submitting form:', error);
        }
    };

    const handlePageChange = (page: number, pageSize?: number) => {
        setPagination({
            ...pagination,
            current: page,
        });
        setFormData({
            ...formData,
            current: page, // 更新 formData 的 current 字段
            pageSize: pageSize || pagination.pageSize, // 更新 formData 的 pageSize 字段
        });
        handleSubmit({
            ...formData
        });
    };

    return (
        <Form
            name="basic"
            labelCol={{span: 8}}
            wrapperCol={{span: 24}}
            // style={{maxWidth: 600}}
            initialValues={{remember: true}}
            onFinish={handleSubmit}
            autoComplete="off"
        >
            <Row gutter={[16, 16]}> {/* 添加 Row 组件，设置 gutter 为水平间距和垂直间距 */}
                <Col span={8}> {/* 将每个输入框包裹在 Col 组件中，并设置 span 为 8 */}
                    <Form.Item<FieldType>
                        label="id"
                        name="id"
                        rules={[{required: false, message: 'Please input id!'}]}
                    >
                        <Input/>
                    </Form.Item>
                </Col>
                <Col span={8}>
                    <Form.Item<FieldType>
                        label="userId"
                        name="userId"
                        rules={[{required: false, message: 'Please input userId!'}]}
                    >
                        <Input/>
                    </Form.Item>
                </Col>
                <Col span={8}>
                    <Form.Item<FieldType>
                        label="createTime"
                        name="createTime"
                        valuePropName="createTime"
                        rules={[{required: false, message: 'Please input createTime!'}]}
                    >
                        <Input/>
                    </Form.Item>
                </Col>
                <Col span={8}>
                    <Form.Item<FieldType>
                        label="history"
                        name="history"
                        valuePropName="history"
                        rules={[{required: false, message: 'Please input history!'}]}
                    >
                        <Input/>
                    </Form.Item>
                </Col>
            </Row>
            <Form.Item wrapperCol={{offset: 8, span: 16}}>
                <div style={{display: 'flex', justifyContent: 'flex-end'}}> {/* 使用 Flexbox 布局将按钮靠右对齐 */}
                    <Button type="primary" htmlType="submit">
                        Submit
                    </Button>
                </div>
            </Form.Item>
            <Table
                columns={columns}
                dataSource={data}
                loading={loading}
                pagination={false}
            />
            <div style={{textAlign: 'right', marginTop: '20px'}}>
                <Pagination
                    current={pagination.current}
                    pageSize={pagination.pageSize}
                    total={pagination.total}
                    onChange={handlePageChange}
                />
            </div>
        </Form>
    );
}
export default TrainList;
